Skip to main content link. Accesskey S
  • Help
  • HCL Logo
  • HCL Notes and Domino Application Development wiki
  • THIS WIKI IS READ-ONLY. Individual names altered for privacy purposes.
  • HCL Forums and Blogs
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • API Documentation
Search
Community Articles > Japanese - 日本語 > Dojo Data Gridの機能と利用方法
  • Share Show Menu▼
  • Subscribe Show Menu▼

Recent articles by this author

Community articleDojo Data Gridの機能と利用方法
Added by ~Sven Nonponeplop | Edited by ~Sven Nonponeplop on February 3, 2014 | Version 5
expanded Abstract
collapsed Abstract
XPages Extension LibraryのDojo Data Gridの機能および利用方法について説明します
Tags: Extension Library, XPages Extension Library Japan Project, Dojo Data Grid
ShowTable of Contents
HideTable of Contents
  • 1 概要
  • 2 Dojo Data Gridとは
  • 3 生成されるタグ
  • 4 Dojo Data Gridで使用する主なプロパティ
  • 5 Dojo Data Gridの使用例
  • 6 サンプルの XPage ソースコード
  • 7 調査環境

概要


XPages Extension Library「Dojo Data Grid」の機能および利用方法について説明します。


Dojo Data Gridとは


Dojoのデータグリッドと呼ばれる機能を使い、データを動的にテーブルに表示させることができるコントロールです。Dojoデータグリッドが標準で持つ列のソート機能や行の選択、編集など複雑なテーブル構造を生成することが可能になります。

生成されるタグ


このコントロールのタグは xe:djxDataGrid です。

	<xe:djxDataGrid id="djxDataGrid1"></xe:djxDataGrid>

	


Dojo Data Gridで使用する主なプロパティ

カテゴリ

プロパティ

説明

データ

store

グリッドのデータを取得するために使用されるDojo データストアオブジェ居を保持するJavascript変数の名前。

初期バージョンから有効

 

storeComponentId

RESTサービスコントロールID。これは実際のストアIDを参照するstoreプロパティより優先されます。

初期バージョンから有効

 

updateDelay

データストアから通知を受け取った後にこのコントロールを更新数rまでの遅延時間(ミリ秒)を指定します。

初期バージョンから有効

基本

autoHeight

高さの自動調整。
表示する行数を指定します。

初期バージョンから有効

 

binding

コントロールバインディング
特定のコントロールプロパティにコントロールをバインドする式を指定します。

初期バージョンから有効

 

dir

方向
方向を継承しないテキストに対して方向を指定します。有効は値は「LTR」(左から右)と「RTL」(右から左)です。

初期バージョンから有効

 

errorMessage

エラーメッセージ
コントロールのコンテンツのロード中2コントロールでエラーが発生した場合に表示されるメッセージを指定します。

初期バージョンから有効

  escapeHTMLInData

データでHTMLをエスケープする
データ内の悪意あるコンテンツからの保護を有効にするかどうかを指定します。これはデフォルトで有効になっています。

初期バージョンから有効

 

headerMenu

ヘッダーメニュー
グリッドヘッダーのコンテキストメニューとして使用するメニューを指定します。

初期バージョンから有効

 

id

コントロールID
コントロールの名前IDを指定します。単一のページで2つのコントロールが同じ名前IDを持つことはできません。

初期バージョンから有効

  jsId

Javascript 変数ID
グリッドオブジェクトを保持するために作成されるJavascript変数の名前。これは後からスクリプトで参照できます。

初期バージョンから有効

  lang

言語コード
コントロールの生成済みマークアップで使用される言語を示します。

初期バージョンから有効

 

  loaded

読み込み
ページのロード時にコントロールを作成する必要があるかどうかを指定します。 値は「true」にデフォルト設定されます。

初期バージョンから有効

  loadingMessage

メッセージをロード中
コントロールのコンテンツをロード中に表示されるメッセージを指定します。

初期バージョンから有効

  query

照会
データストアから項目をフェッチするために使用される照会を指定します。

初期バージョンから有効

  rendered

レンダリングフラグ
後続のすべてのフォーム送信でコントロールを表示するのが、処理するのかを指定します。

初期バージョンから有効

  rendererType

レンダラタイプ
このコントロールをエンコードおよびデコードするための適切なレンダラを(コントロールによって定義される「family」とともに)指定します

バージョン8.5.1から有効

  rowPerPage

ページ辺りの行数
表示する行数を指定します。

初期バージョンから有効

  selectable

選択可能
このコントロール内でテキスト選択を有効にするかどうかを指定します。

初期バージョンから有効

  selectionMode

選択モード
行選択を処理する方法を指定します。

初期バージョンから有効

  singleClickEdit

シングルグルクリックで編集
セル編集モードに入るためにシングルクリックが必要かどうかを指定します。デフォルトでは、このプロパティはfalseです。これはセル編集モードに入るためにダブルクリックが必要であることを意味します。

初期バージョンから有効

 


Dojo Data Gridの使用例



テストデータ200文書をDojo Data Gridで表示させた例

Dojo Data Grid 使用例

サンプルの XPage ソースコード



このサンプルを動作させるには、Open NITF XPages Extension Library Japan からダウンロードできるモジュールに含まれているXPagesExt.nsf からAllContents ビュー、サンプル文書をお手元のNSFにコピーして下さい。

 

Dojo Data Gridでは下記サンプルのようにまず<xe:restService> を利用することで、表示させる文書を格納したビューからDojo Data Gridが扱えるdojo.data.FileStore という形式にコンバートしておくのが一般的です。

 

@nowiki@2の内容をDojo Data Gridに渡すには、@nowiki@3で定義したIDを@nowiki@4のstoreComponentIdという属性に指定することでおこないます。
(例)storeComponentId="restService1"

 

さらに、@nowiki@5の中で<xe:this.dojoAttributes>、<xe:djxDataGridColumn> を利用してテーブルの属性、列を定義していきます。

 

また参考として、最下部の の箇所では、クライアントJavascriptを利用してDojo Data Gridで選択された文書のUNIDを取得するサンプルコードを掲載しています。

   

	<?xml version="1.0" encoding="UTF-8"?>

	<xp:view xmlns:xp="http://www.ibm.com/xsp/core"

	    xmlns:xe="http://www.ibm.com/xsp/coreex"

	    xmlns:xc="http://www.ibm.com/xsp/custom">

	

	    <xp:br />

	    <xp:br />

	    <xe:restService id="restService1">

	        <xe:this.service>

	            <xe:viewItemFileService viewName="AllContacts"

	                defaultColumns="true" contentType="application/json" var="entry">

	                <xp:this.columns>

	                    <xe:restViewColumn name="ShortName">

	                        <xp:this.value><![CDATA[#{javascript:var e = entry.getColumnValue("EMail")

	if(e) {

	    var p = @UpperCase(@Left(e,"@"))

	    return p

	}

	return ""}]]></xp:this.value>

	                    </xe:restViewColumn>

	                </xp:this.columns>

	            </xe:viewItemFileService>

	        </xe:this.service>

	    </xe:restService>

	

	    <xe:djxDataGrid id="djxDataGrid1"

	        style="width: 85em;height: 25em;padding: 1px" storeComponentId="restService1">

	        <!--

	            style="width: 85em;height: 25em;padding: 1px"

	            storeComponentId="restService1"> style="width: 85em;height:

	            25em;padding: 1px" store="restService3">

	        -->

	        <xe:djxDataGridColumn id="djxDataGridColumn6"

	            field="FirstName" width="auto" editable="true">

	        </xe:djxDataGridColumn>

	        <xe:djxDataGridColumn id="djxDataGridColumn7"

	            field="LastName" width="auto" editable="true">

	        </xe:djxDataGridColumn>

	        <xe:djxDataGridColumn id="djxDataGridColumn8"

	            field="City" width="auto">

	        </xe:djxDataGridColumn>

	        <xe:djxDataGridColumn id="djxDataGridColumn9"

	            field="EMail" width="auto">

	        </xe:djxDataGridColumn>

	        <xe:djxDataGridColumn id="djxDataGridColumn10"

	            field="ShortName" width="auto">

	        </xe:djxDataGridColumn>

	    </xe:djxDataGrid>

	

	    <xp:br />

	    <xp:br />

	    <!-- GridViewで選択された行のUNIDを取得して表示 -->

	    <xp:link escape="true" id="link2" text="選択された行文書のUNIDを取得">

	        <xp:eventHandler event="onclick" submit="false" immediate="false"

	            save="false">

	            <xp:this.script><![CDATA[var grid = dijit.byId('#{id:djxDataGrid1}');

	    var items = grid.selection.getSelected();

	    if(items.length) {

	        dojo.forEach(items, function(selectedItem) {

	            if(selectedItem!==null) {

	                dojo.forEach(grid.store.getAttributes(selectedItem), function(attribute){

	                    var value = grid.store.getValues(selectedItem, attribute);

	    //                alert('attribute: ' + attribute + ', value: ' + value);

	                    if(attribute === '@unid'){

	                        alert("選択されたUNID: "+value);

	                    }

	                });

	            }

	        });

	    }

	    

	    ]]></xp:this.script>

	        </xp:eventHandler>

	

	    </xp:link>

	

	</xp:view>

	


調査環境



Lotus Notes/Domino 9 + Extension Library

 

expanded Attachments (0)
collapsed Attachments (0)
expanded Versions (11)
collapsed Versions (11)
Version Comparison     
VersionDateChanged by              Summary of changes
11Feb 3, 2014, 6:05:58 AM~James Desfoochek  
10Feb 3, 2014, 6:05:02 AM~Sven Nonponeplop  
9Feb 3, 2014, 6:04:01 AM~Sven Nonponeplop  
8Feb 3, 2014, 6:03:07 AM~Sven Nonponeplop  
7Feb 3, 2014, 6:01:59 AM~Sven Nonponeplop  
6Feb 3, 2014, 6:00:00 AM~Sven Nonponeplop  
This version (5)Feb 3, 2014, 5:58:33 AM~Sven Nonponeplop  
4Feb 3, 2014, 5:56:48 AM~Sven Nonponeplop  
3Feb 3, 2014, 5:29:51 AM~Sven Nonponeplop  
2Feb 3, 2014, 5:28:39 AM~Sven Nonponeplop  
1Feb 3, 2014, 5:25:41 AM~Sven Nonponeplop  
Copy and paste this wiki markup to link to this article from another article in this wiki.
Go ElsewhereStay ConnectedAbout
  • HCL Software
  • HCL Digital Solutions community
  • HCL Software support
  • BlogsDigital Solutions blog
  • Community LinkHCL Software forums and blogs
  • About HCL
  • Privacy
  • Accessibility